<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
	<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="<%=request.getContextPath()%>/statics/uimaker/css/style.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath()%>/statics/common/vendor/layer/skin/layer.css" rel="stylesheet" type="text/css" />

</head>
<body>
	<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="#">首页</a></li>
    <li><a href="#">系统模块</a></li>
    <li><a href="#">用户管理</a></li>
    </ul>
    </div>
    <div class="rightinfo">
    <div class="tools">
    	<ul class="toolbar">
        <li class="click" id="addUser"><span><img src="<%=request.getContextPath()%>/statics/uimaker/images/t01.png" /></span>添加</li>
        <li class="click"><span><img src="<%=request.getContextPath()%>/statics/uimaker/images/t02.png" /></span>修改</li>
        <li><span><img src="<%=request.getContextPath()%>/statics/uimaker/images/t03.png" /></span>删除</li>
        <li><span><img src="<%=request.getContextPath()%>/statics/uimaker/images/t04.png" /></span>统计</li>
        </ul>
        <ul class="toolbar1">
        <li><span><img src="<%=request.getContextPath()%>/statics/uimaker/images/t05.png" /></span>设置</li>
        </ul>
    </div>
	<table class="tablelist">
    	<thead>
	    	<tr>
		        <th><input name="pCheck" type="checkbox" value=""/></th>
		        <th>编号<i class="sort"><img src="<%=request.getContextPath()%>/statics/uimaker/images/px.gif" /></i></th>
		        <th>姓名</th>
		        <th>帐号</th>
		        <th>角色</th>
		        <th>状态</th>
		        <th>操作</th>
	        </tr>
        </thead>
        <tbody>
        <c:forEach items="${listUser}" var="u" varStatus="v">
	  		<tr>
		        <td><input name="cCheck" type="checkbox" value="${u.id}" /></td>
		        <td>${v.count }</td>
		        <td>${u.name }</td>
		        <td>${u.code }</td>
		        <td><c:forEach items="${u.sysRoleList }" var="r">${r.name}&nbsp;</c:forEach></td>
		        <td>${u.state }</td>
		        <td>
		        	<a href="javascript:;" class="tablelink" onclick="user.showUpdate('${u.id}')">查看</a>
		        	<a href="javascript:;" class="tablelink" onclick="user.deleteUser('${u.id}')"> 删除</a>
		        </td>
        	</tr> 
        </c:forEach>
        </tbody>
    </table>
   
    <div class="pagin">
    	<div class="message">共<i class="blue">${pageModel.totalRecords }</i>条记录，当前显示第&nbsp;<i class="blue">${pageModel.pageNo}&nbsp;</i>页</div>
        <ul class="paginList">
	        <li class="paginItem"><a href="javascript:;" onclick="user.getUserList(1)">首页</a></li>
	        <li class="paginItem"><a href="javascript:;" <c:if test="${pageModel.pageNo>1}">onclick="user.getUserList(${pageModel.pageNo-1})"</c:if>>&lt;</a></li>
	        <li class="paginItem"><a href="javascript:;" <c:if test="${pageModel.pageNo<pageModel.totalPage}">onclick="user.getUserList(${pageModel.pageNo+1})"</c:if>>&gt;</a></li>
	        <li class="paginItem"><a href="javascript:;" onclick="user.getUserList(${pageModel.totalPage})">尾页</a></li>
        </ul>
    </div>

    <div class="tip" id="add">
    <form action="" id="userForm" method="post">
    	<div class="tiptop"><span>新增用户</span><a></a></div>
     	<div class="tipinfo" id="roleSelect">
     		帐号：<input type="text" name="user.code" class="dfinput"/><br>
     		密码：<input type="text" name="user.password" class="dfinput"/><br>
     		姓名：<input type="text" name="user.name" class="dfinput"/><br>
     		角色：
     			 
       	</div>
        <div class="tipbtn">
	        <input type="button" onclick="user.add()" class="sure" value="确定" />&nbsp;
	        <input type="reset"  class="cancel" value="取消" />
        </div>
    </form>
    </div>
    
     <div class="tip" id="update">
    <form action="" id="userUpdateForm" method="post">
    	<div class="tiptop"><span>修改用户</span><a></a></div>
     	<div class="tipinfo">
     		<input type="hidden" name="user.id" id="updateUserId"/>
     		帐号：<input type="text" name="user.code" id="updateCode" readonly="readonly" class="dfinput"/><br>
     		姓名：<input type="text" name="user.name" id="updateName" class="dfinput"/><br>
     		<label>角色：</label><label id="roleSelectUpdate" style="width:300px"></label>
     				 
       	</div>
        <div class="tipbtn">
	        <input type="button" onclick="user.update()" class="sure" value="确定" />&nbsp;
	        <input type="reset"  class="cancel" value="取消" />
        </div>
    </form>
    </div>
    </div>
    <script src="<%=request.getContextPath()%>/statics/common/vendor/jquery.min.js"></script>
     <script src="<%=request.getContextPath()%>/statics/common/vendor/layer/layer.js"></script>
    <script>
   
	var user = {
			getCheck:function(){
				var checks = $("input[name='cChack']");
				var i=0;
				$(checks).each(function(index,v){
					
				});
			},
			getUserList:function(No){
				window.location.href='<%=request.getContextPath()%>/sys/user_getUserList?pageNo='+No;
			},
			add:function(){
				$.ajax({
					type: "post",
					url:'<%=request.getContextPath() %>/sys/user_add',
					data:$('#userForm').serialize(),
					success: function(data) {
						if(data!=null&&data!=''){
							layer.msg('新增成功！',{
								icon:1,
								time:1000
								});
						}else{
							layer.msg('新增失败！',{
								icon:5,
								time:1000
								});
						}
					}
				});
				location.reload(); 
			},
			showUpdate:function(vid){
				$.post("<%=request.getContextPath()%>/sys/user_getUserRole",{id:vid},
						function(data){
					console.info(data.id);
							$('#updateUserId').val(data.id);
							$('#updateCode').val(data.code);
							$('#updateName').val(data.name);
							var checkedItems = [];
							$(data.sysRoleList).each(function(i,v){
								checkedItems.push(v.id);
							});
							$.post("<%=request.getContextPath()%>/sys/user_getRole",
								function(data){
								$('#roleSelectUpdate').text('');
								$(data).each(function(i, v){
									$('#roleSelectUpdate').append('<input name="roleId" type="checkbox" value="'+ v.id +'"/>'+ v.name+'&nbsp;' );
									if ($.inArray(v.id + '', checkedItems) != -1) {
										 $(":checkbox[value='"+v.id+"']").prop("checked",true);
									}
								});	
							},'json');
				},'json');	
				$("#update").fadeIn(200);
				
			},
			deleteUser:function(id){
				
			},
			update:function(){
				$.post("<%=request.getContextPath()%>/sys/user_update",$('#userUpdateForm').serialize(),
						function(data){
							if(data!=null){
								layer.msg('修改成功！',{
									icon:1,
									time:1000
									});
							}else{
								layer.msg('修改失败！',{
									icon:5,
									time:1000
									});
							}
				});
				 location.reload(); 
			},
			unclick:function(){
			}
	}
	$(function(){
		
		$('.tablelist tbody tr:odd').addClass('odd');
		
		$(document).ready(function(){
			$("#addUser").click(function(){
				$.post("<%=request.getContextPath()%>/sys/user_getRole",
					function(data){
						for(var i=0;i<data.length;i++){
							$('#roleSelect').append('<input name="roleId" type="checkbox" value="'+ data[i].id +'"/>'+ data[i].name+'&nbsp;' );
						}
						$("#add").fadeIn(200);
				},'json');
				 
			});
			$(".tiptop a").click(function(){
				 $(".tip").fadeOut(200);
			});
			$(".sure").click(function(){
				 $(".tip").fadeOut(100);
			});
			$(".cancel").click(function(){
				 $(".tip").fadeOut(100);
			});
		});
		
	});
	</script>
</body>

</html>
